I have more than 3 q-cards in quasar that should display more text when the read more button is pressed, but this does it in all the cards and I need it to be individually. And when you press the btn is change to "Show less". Please, someone that can help me to make this better. Here is a part of my code:
template...
<q-card class="card1 text-white col-8 col-sm-6 self-start q-gutter-x-sm">
<q-card-section>
<div class="text-h6">{{ tit8 }}</div>
</q-card-section>
<q-card-section>
{{ p7 }}
</q-card-section>
<q-card-section v-if="showText" class="q-pt-none">
{{ ubikus }} <br />
<a
class="text-green text-h6"
href="#"
>Ubikuss Project</a
>
</q-card-section>
<q-card-actions @click="toggleText">
<q-btn flat label="Show More" />
</q-card-actions>
</q-card>
<q-card
class="card1 text-white col-8 col-sm-6 self-start q-gutter-x-sm">
<q-card-section>
<div class="text-h6">{{ tit9 }}</div>
</q-card-section>
<q-card-section>
{{ p8 }}
</q-card-section>
<q-card-section v-if="showText" class="q-pt-none">
{{ translate}}<br />
<a
class="text-green text-h6"
href="#"
>Translatoria Project</a
>
</q-card-section>
<q-card-actions @click="toggleText">
<q-btn flat label="Show More" />
</q-card-actions>
</q-card>
<q-separator vertical />
<br />
script..
export default defineComponent({
data() {
return {
showText: false
}}
methods: {
toggleText() {
this.showText = !this.showText;
},
},
You can create loop to display your cards and use index to show/hide:
const app = Vue.createApp({
data() {
return {
projects: [{title: 'aaa', nr: 7, text: 'ubikus', link: 'Ubikuss Project'}, {title: 'bbb', nr: 8, text: 'translate', link: 'Translatoria Project'}, {title: 'ccc', nr: 9, text: 'other', link: 'some'}],
showText: null
}
},
methods: {
toggleText(idx) {
this.showText === idx ? this.showText = null : this.showText = idx
},
},
})
app.use(Quasar)
app.mount('#q-app')<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.5.5/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
<div v-for="(project, index) in projects" :key="index">
<q-card class="card1 col-8 col-sm-6 self-start q-gutter-x-sm">
<q-card-section>
<div class="text-h6">{{ project.title }}</div>
</q-card-section>
<q-card-section>
{{ project.nr }}
</q-card-section>
<q-card-section v-if="showText === index" class="q-pt-none">
{{ project.text }} <br />
<a class="text-green text-h6" href="#">{{ project.link }}</a>
</q-card-section>
<q-card-actions @click="toggleText(index)">
<q-btn flat label="Show More" />
</q-card-actions>
</q-card>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.5.5/dist/quasar.umd.prod.js"></script>